<template>
  <div>
    <div style="background:white;width:86%;margin-left:7%">
        <div class="id01" style="position: relative;width:60%;left:20%;top:20px;height:100px;text-align:center">
          <h1 style="color:rgb(104, 177, 241);position:relative;top:40%;font-size:23px">个人中心</h1>
        </div>
        <div class="id02" style="position: relative;width:60%;left:20%;;border-radius: 10px;border:2px solid rgb(250, 250, 252);height:600px">
          <div style="position: relative;top:60px;left:70px">
            <span style="font-size:20px;color:rgb(40, 139, 206);margin-left:20px">用户名:
              <el-input :disabled="true" style="width:45%;" v-model="user.username" placeholder="请输入内容"></el-input>
            </span><br><br>
            <span style="font-size:20px;color:rgb(40, 139, 206);margin-left:40px">密码:
              <el-input :disabled="true" style="width:45%;" placeholder="请输入密码" v-model="user.password" show-password></el-input>
            </span><br><br>
            <span style="font-size:20px;color:rgb(40, 139, 206)">用户姓名:
              <el-input style="width:45%;" v-model="user.nickname" placeholder="请输入内容"></el-input>
            </span><br><br>
            <span style="font-size:20px;color:rgb(40, 139, 206);margin-left:40px">学院:
              <el-input style="width:45%;" v-model="user.department" placeholder="请输入内容"></el-input>
            </span><br><br>
            <span style="font-size:20px;color:rgb(40, 139, 206);">用户邮箱:
              <el-input style="width:45%;" v-model="user.email" placeholder="请输入内容"></el-input>
            </span><br><br>
            <span style="font-size:20px;color:rgb(40, 139, 206);">居住地址:
              <el-input style="width:45%;position:relative;" v-model="user.address" placeholder="居住地址"></el-input>
            </span><br><br>
            <el-button style="width:20%;margin-top:20px;margin-left:60px" type="primary" @click="UpdateInformation(user)">更新信息</el-button>
            <el-button style="width:20%;margin-left:200px" type="primary" @click="Exit">退出登录</el-button>
          </div>
          <div style="position:absolute;top:15%;left:80%;background:">
            <el-button icon="el-icon-edit-outline" type="info" style="background:rgb(77, 129, 243)" @click="updatapassword">修改密码</el-button>
          </div>
        </div>
        <div v-show="revisepasswordVShow" style="background:rgb(115, 224, 228);width:20%;height:220px;position:absolute;top:300px;left:40%;border-radius: 10px;border:2px solid rgb(212, 212, 224)">
          <span style="position:relative;top:13px;left:15px">新密码：
            <el-input style="width:200px" size="small " placeholder="请输入新密码" v-model="revisepassword.newpassword" show-password></el-input>
          </span><br>
          <span style="position:relative;top:16px">确认密码：
            <el-input style="width:200px" size="small " placeholder="请确认密码" v-model="revisepassword.mustpassword" show-password></el-input>
          </span><br>
          <div style="display:flex">
            <span style="position:relative;top:22px;left:15px">验证码：
            <el-input
            style="width:40%" size="small "
            placeholder="请输入验证码"
            v-model="revisepassword.verificationcode"
            clearable>
            </el-input>
            <el-image :src="url" style="width:20%;position:relative;top:20%" @click="UpdataVerification"></el-image>
          </span>
          </div>
          <br><br>
          <el-button size="small " type="primary" style="position:relative;top:25px;left:70px" @click="NewpasswordComite">修改</el-button>
          <el-button size="small " type="primary" style="position:relative;top:25px;left:150px" @click="updatapassword">取消</el-button>
        </div>
    </div>
  </div>
</template>

<script>
import request from '@/util/request';
export default {
    name:'UserCenter',
    data(){
      return{
        input:'',
        url:'',
        Image:true,
        revisepasswordVShow:false,//修改密码弹窗控制
        user:{},
        revisepassword:{newpassword:'',mustpassword:'',verificationcode:'',uuid:''},//修改密码
        verificationcode:'',//验证码
        count:30,//计时
        Timing:true,//计时控制
        windowheight:window.innerHeight,
      }
    },
    mounted(){
      this.UpdataVerification();
      this.GetUserInformation();
    },
    methods:{
        //退出
    Exit(){
      this.$router.push('/ActiveLogin')
    },
    //更新验证码
    UpdataVerification(){        
            request.get('/admin/captcha').then((res) => {
                console.log(res);
                    this.url=res.data.base64Img;
                    this.revisepassword.uuid=res.data.uuid;
            })
            .catch(err =>{
                console.log('错误信息：',err.message)
                if (err.response) {
                console.error(err)
                this.$notify.error({
                  title:'错误',
                  message:err.message
                })
              } else {
                this.$notify.error({
                  title:'错误',
                  message:'网络错误'
                })
            }
               }
            )
    },
    //修改密码弹窗控制
    updatapassword(){
      this.revisepasswordVShow=!this.revisepasswordVShow;
    },
    //密码修改提交
    NewpasswordComite(){
      if(this.revisepassword.newpassword!=this.revisepassword.mustpassword)
      {
        this.$notify.error({
                  title:'错误',
                  message:'两次输入的密码不相同'
                })
      }
      else if(this.revisepassword.verificationcode=='')
      {
        this.$message({
          type:'warning',
          message:'验证码不能为空'
        });
      }
      else{
        request.post('/user/newpassword',this.revisepassword).then((res) => {
              console.log('获取成功：',res)
              if(res.data===true)
              {
                this.$notify.success({
                  title:'提示',
                  message:'密码修改成功，请重新登录'
                })
                this.$router.push('/ActiveLogin');
              }   
      })
      .catch(err =>{
              console.log('错误信息：',err.message)
              if (err.response) {
                console.error(err)
                this.$notify.error({
                  title:'错误',
                  message:err.message
                })
              } else {
                this.$notify.error({
                  title:'错误',
                  message:'网络错误'
                })
            }
         }
      ) 
      }
    },
    //获取用户信息
    GetUserInformation(){
      request.get('/user/getuserinformation').then((res) => {
              console.log('获取成功：',res)
              this.user=res.data;
      
      })
      .catch(err =>{
              console.log('错误信息：',error.message)
              if (err.response) {
                console.error(err)
                this.$notify.error({
                  title:'错误',
                  message:err.message
                })
              } else {
                this.$notify.error({
                  title:'错误',
                  message:'网络错误'
                })
            }
         }
      )
    },
    //更新用户信息
    UpdateInformation(val){
      request.post('/user/updateinformation',val).then((res) => {
              console.log('获取成功：',res)
              if(res.data===true)
              {
                this.$message({
                  type:'success',
                  message:'信息修改成功'
                });
              }
      })
      .catch(err =>{
              console.log('错误信息：',error.message)
              if (err.response) {
                console.error(err)
                this.$notify.error({
                  title:'错误',
                  message:err.message
                })
              } else {
                this.$notify.error({
                  title:'错误',
                  message:'网络错误'
                })
            }
         }
      )
    }
    },

}
</script>

<style>
.id01
{
  background-image: url('./img/1101.bmp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.id02
{
  background-image: url('./img/89.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>